<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/register.css">
    <link rel="stylesheet" href="../css/reset.css">
</head>

<body>
    <!--header-->
    <div id="header">
        <div class="header-con">
            <h1>
                <a href="#"><img src="../images/logo.png" alt=""></a>
            </h1>
        </div>
    </div>
    <!--content-->
    <div id="content">
        <div class="content-con">
            <table>
                <tr>
                    <td>用户名：</td>
                    <td><input type="text" name="username"></td>
                    <td></td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td><input type="password" name="password"></td>
                    <td></td>
                </tr>
                <tr>
                    <td> <input type="checkbox"  style="width: 80px;" class="remember"></td>
                    <td style="text-align: left;">记住用户名</td>

                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="登陆" class="btn"></td>
                </tr>
            </table>
        </div>
    </div>
</body>
<script src="../lib/promiseAjax.js"></script>
<script src="../lib/cookie.js"></script>
<script>
    var btn = document.querySelector(".btn");
    var u = document.querySelector("[name=username]");
    var uname = getCookie("uname");
    if (uname) {
        u.value = uname;
    } else {
        uname = "";
    }

    btn.onclick = function() {
        var username = u.value.trim();
        var password = document.querySelector("[name='password']").value.trim();
        var remember = document.querySelector(".remember");

        if (username == "") {
            u.parentElement.nextElementSibling.innerText = "用户名不可为空";
            return false;
        }
        if (password == "") {
            document.querySelector("[name='password']").parentElement.nextElementSibling.innerText = "密码不可为空";
            return false;
        }
        promiseAjax({
            type: "post",
            url: "../php/logoin.php",
            data: {
                username: username,
                password: password
            }
        }).then(function(res) {
            if (res.status == 200) {
                setCookie("username", username, 3600);
                if (remember.checked) {
                    setCookie("uname", username, 3600);

                } else {
                    removeCookie("uname");

                }
                alert(res.msg);
                location.href = "./index.html";
            } else {
                alert(res.msg);
                return;
            }
        })
    }
</script>

</html>